.container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left:0;
  top:0;
  display: flex;
  .mask {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top:0;
    background:#000;
    opacity: .6;
  }
  .tip {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 30%);
    background:#fff;
    display: flex;
    flex-direction: column;
    z-index: 10;
    transform: translate(0px, 32%);
    transition: all 1s;
    .header {
      height: 35px;
      display: flex;
      span {
        flex:1;
        &.span:nth-child(1){
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        &.span:nth-child(2){
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
    .main {
      overflow: auto;
      .content {
         .type-wrapper {
           .type-span {
             display: inline-block;
             margin:5px;
            //  width: 60px;
            //  height: 35px;
            padding: 0px 15px;
            // display: flex;
            // justify-content: center;
            // align-items: center;
            //  text-align:center;
            //  line-height: 35px;
             border-radius: 10px;
             border:.5px solid #eee;
             background: #eee;
           }
           .hide {
             background: #eee;
           }
           .show {
             background: lightblue;
           }
         }
      }
    }
  }
}